import * as React from "react"
import { Bell, type LucideIcon} from "lucide-react"

import {
    SidebarGroup,
    SidebarGroupContent,
    SidebarMenu, SidebarMenuBadge,
    SidebarMenuButton,
    SidebarMenuItem,
} from "@/components/ui/sidebar"
import {Badge} from "@/components/ui/badge";

export function NavSecondary({
                                 items,
                                 ...props
                             }: {
    items: {
        title: string
        url: string
        icon: LucideIcon
    }[]
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
    return (
        <SidebarGroup {...props}>
            <SidebarGroupContent>
                <SidebarMenu>

                    <SidebarMenuItem >
                        <SidebarMenuButton asChild  >
                            <div className={"flex justify-between items-center bg-primary text-primary-foreground"}>
                                <a href={"#"} className={"flex-row items-center flex flex-1"}>
                                    <Bell size={20} />
                                    <span className={"ml-2"}> 系统通知</span>

                                </a>
                                <Badge className={"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums bg-white text-black"}>99+</Badge>
                            </div>


                        </SidebarMenuButton>


                    </SidebarMenuItem>

                </SidebarMenu>
            </SidebarGroupContent>
        </SidebarGroup>
    )
}
